<template>
  <div @keydown.enter="addJobLabel">
    <div>
      <el-tag type="success" class="tag">职称名称</el-tag>
      <el-input v-model="JobLabel.name" size="small" class="JobLabelName" placeholder="添加支撑的等级"></el-input>
      <el-select v-model="JobLabel.titleLevel" clearable size="small" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
      <el-button class="add" type="primary" size="small" @click="addJobLabel" icon="el-icon-plus">添加</el-button>
    </div>
    <div class="tableJL">
      <el-table
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            align="center"
            prop="id"
            label="编号"
            width="75">
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="职称名称"
            width="150">
        </el-table-column>
        <el-table-column
            align="center"
            prop="titleLevel"
            label="职称等级"
            width="150">
        </el-table-column>
        <el-table-column
            align="center"
            prop="createDate"
            label="创建日期"
            width="210">
        </el-table-column>
        <el-table-column
            prop="enabled"
            label="是否启用"
            width="80">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
            <el-tag type="danger" v-else>未启用</el-tag>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="showEditDialog(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-button type="danger" class="batchDel" :disabled="this.multipleSelection.length==0" @click="batchDel">批量删除
      </el-button>
    </div>
    <el-dialog
        title="编辑职称"
        :visible.sync="dialogVisible"
        width="30%">
      <table class="tableEdit">
        <tr>
          <td>
            <el-tag type="success">职称名称</el-tag>
          </td>
          <td>
            <el-input size="small" v-model="JobLabelUpdate.name" placeholder="请输入内容"></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <el-tag type="success">职称等级</el-tag>
          </td>
          <td>
            <el-select v-model="JobLabelUpdate.titleLevel" size="small" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <el-tag type="success">是否启用</el-tag>
          </td>
          <td>
            <el-switch
                v-model="switchValues"
                :active-text="switchValue()">
            </el-switch>
          </td>
        </tr>
      </table>
      <div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleEdit">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "JobLebelMana",
  data() {
    return {
      JobLabel: {
        name: '',
        titleLevel: ''
      },
      JobLabelUpdate: {
        name: '',
        titleLevel: ''
      },
      JobLabelUpdatePre: {},
      options: ['正高级', '副高级', '中级', '初级', '员级'],
      tableData: [],
      dialogVisible: false,
      switchValues: '',
      multipleSelection: []
    }
  },
  mounted() {
    this.initJobLevelList();
  },
  methods: {
    initJobLevelList() {
      this.getRequest('/system/basic/joblevel/').then(resp => {
        this.tableData = resp;
      })
    },
    switchValue() {
      if (this.switchValues) {
        return '启用';
      } else {
        return '停用';
      }
    },
    showEditDialog(index, data) {
      this.dialogVisible = true;
      this.JobLabelUpdatePre = data;
      this.switchValues = data.enabled;
      Object.assign(this.JobLabelUpdate, data);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchDel() {
      let ids = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      this.$confirm('此操作将永久删除id为[' + ids + ']，确认吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = []
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
        this.deleteRequest('/system/basic/joblevel/', ids).then(resp => {
          if (resp) {
            this.initJobLevelList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleEdit() {
      let flag = false;
      //用于判断是否有修改。
      this.JobLabelUpdate.enabled = this.switchValues;
      if (this.JobLabelUpdate.name.trim() == '' || this.JobLabelUpdate.name.trim() == '') {
        this.dialogVisible = false;
        return;
      }
      for (const k in this.JobLabelUpdate) {
        if (this.JobLabelUpdate[k] != this.JobLabelUpdatePre[k]) {
          flag = true;
          break;
        }
      }
      if (flag) {
        this.JobLabelUpdate.createDate = '';
        this.putRequest('/system/basic/joblevel/', this.JobLabelUpdate).then(resp => {
          if (resp) {
            this.dialogVisible = false;
            this.initJobLevelList();
          }
        })
      } else {
        this.dialogVisible = false;
      }
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除[' + row.name + ']否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/joblevel/' + row.id).then(resp => {
          if (resp) {
            this.initJobLevelList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      console.log(index, row);
    },
    addJobLabel() {
      if (this.JobLabel.name.trim() && this.JobLabel.titleLevel) {
        this.postRequest('/system/basic/joblevel/', this.JobLabel).then(resp => {
          if (resp) {
            this.initJobLevelList();
            this.JobLabel.name = '';
            this.JobLabel.titleLevel = '';
          }
        })
      } else {
        this.$message.error("字段不能为空");
      }
    }

  }

}
</script>

<style scoped>
.tag {
  margin-right: 8px;
}

.JobLabelName {
  width: 180px;
  margin-right: 8px;
}

.add {
  margin-left: 8px;
}

.tableJL {
  padding-top: 10px;
}

.tableEdit tr {
  height: 45px;
}

.batchDel {
  margin-top: 8px;
}
</style>